$textColor: #69717E;

.car-insurace-box {
  width: 7.5rem;
  font-family: Helvetica;
  height: 100%;
  background-color: #F3F4F6;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;

  .car-insurace-title {
    width: 100%;
    font-size: .34rem;
    text-align: center;
    padding: .22rem 0;
    background: #fff;
  }
  .info-bg {
    width: 100%;
    height: 2.4rem;
    background: url('../../public/assets/images/car-insurance/background.png') top center no-repeat;
    background-size: 7.5rem 2.4rem;
  }
  .info-content {
    display: flex;
    width: 7rem;
    padding: .7rem .4rem;
    margin-left: .25rem;
    margin-top: -1.2rem;
    border-radius: .08rem;
    background-color: #fff;
    justify-content: space-between;
    z-index: 11;
  }
  .info-name {
    font-size: .48rem;
    color: $textColor;
    font-weight: bold;
    margin-bottom: .08rem;
  }
  .info-license {
    font-size: .3rem;
    color: $textColor;
  }
  .info-img {
    width: 1.2rem;
    height: 1.2rem;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .project-box {
    display: flex;
    padding: 0 .72rem;
    margin-top: .24rem;
    justify-content: space-between;
  }
  // .project-item {
  //   width: 
  // }
  .project-img {
    width: .96rem;
    height: .96rem;
    display: flex;
    align-items: center;
    justify-content: center;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .project-text {
    font-size: .3rem;
    color: $textColor;
    letter-spacing: 0.51px;
    text-align: center;
    margin-top: .16rem;
  }
}

.detail-box {
  width: 7.5rem;
  font-family: Helvetica;

  .mile-info-box {
    width: 100%;
    position: relative;
    // height: 6rem;
    padding-top: .32rem;
    background-color: #333543;
  }
  .mile-info {
    // margin-bottom: .45rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mileage-lanel {
    display: inline-block;
    color: #fff;
    margin-right: .25rem;
    font-size: .28rem;
    color: rgba(255, 255, 255, 0.85);
  }
  .mileage-num {
    display: inline-block;
    font-weight: bold;
    font-size: .6rem;
    color: #ED7D45;
  }
  .mile-item-box {
    display: flex;
    justify-content: center;
  }
  .echarts-box {
    width: 100%;
    height: 1.5rem;
    position: absolute;
    bottom: -.3rem;
  }
  .mile_item {
    position: relative;
    width: 2.4rem;
    height: 3.3rem;
    padding: .24rem .2rem 0;
    margin-top: 1.14rem;
    text-align: left;
    box-sizing: border-box;
    opacity: 0.35;
    line-height: 1;
    background-image: linear-gradient(-180deg, #EEEEEE 0%, rgba(255, 255, 255, 0) 69%);
    // background: url(../../public/assets/images/car-insurance/btn_white.png) top center no-repeat;
    // background-size: 2.4rem 2.74rem;
  }
  .mile-label {
    font-size: .28rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
  }
  .mile-money {
    font-weight: bold;
    font-size: .64rem;
    color: #FFFFFF;
  }
  .divide {
    width: .8rem;
    height: .04rem;
    background: #ED7D45;
    margin-top: .14rem;
  }
  .today-label {
    font-size: .28rem;
    width: 2.4rem;
    text-align: center;
    color: #fff;
    position: absolute;
    bottom: .13rem;
    left: 0;
  }
  .current-item {
    margin-top: .63rem;
    opacity: 1;
    background: url(../../public/assets/images/car-insurance/btn_green.png) top center no-repeat;
    background-size: 2.4rem 3.3rem;
  }

  .disease-box {
    padding: .24rem .2rem .26rem;
  }
  .disease-content {
    width: 7.12rem;
    // height: 4.7rem;
    padding: .23rem .32rem .16rem .3rem;
    background: #FFFFFF;
    border: 1px solid #E6E6E6;
    border-radius: .08rem;
    background: url(../../public/assets/images/car-insurance/card.png) top center no-repeat;
    background-size: 7.12rem 4.7rem;
  }
  .diease-title {
    margin-bottom: .24rem;
    font-size: .4rem;
    color: #333;
  }
  .disease-item {
    line-height: 2;
  }
  .disease-label {
    display: inline-block;
    opacity: 0.75;
    font-size: .3rem;
    color: #6D7480;
  }
  .disease-cont {
    display: block;
    float: right;
    font-size: .3rem;
    font-weight: bold;
    color: #69717E;
    text-align: right;
  }
  .detail-footer {
    margin-top: .26rem;
    font-size: .24rem;
    color: #69717E;
  }
  .instruct-text {
    display: inline-block;
    margin-left: .08rem;
    color: #00B34A;
  }
}
